<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
/*		标签选择器*/
		p{
			color: blue;
/*			设置字体颜色*/
		}
		h1{
			background-color: pink;
		}
		div{
			width: 300px;
			height: 300px;
			background-color: orange;
		}
/*		类选择器 class*/
	.duan{
		width: 300px;
		height: 300px;
		background-color: orange;
	}
	.xiong{
		width: 100px;
		height: 100px;
		background-color: skyblue;
	}
/*	id 选择器 同一个id名 一个页面只能有一个*/
	#nie{
/*		文本在容器中的对齐方式*/
/*		left right center*/
/*		文本在容器的水平对齐方式*/
		text-align: right;
	}
	#jia{
		text-align: center;
	}
	</style>
</head>
<body>
	<h1>步惊云</h1>
	<p id="nie">聂风</p>
	<p id="jia">嘉豪</p>
	<!-- 不能重名 id是唯一的 -->

	<!-- 可以多次使用类名 -->
	<div class="duan">断浪</div>
	<div class="xiong">雄霸</div>
</body>
</html>